<template>
  <PageTemplate>
    <div class="she-config" slot="content">
      <PageEditCollapse :is-search="false" :default-collapse="true">
        <div slot="title" class="page-edit-colllapse-title">
          <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-tree
              :data="treeData1"
              default-expand-all
              node-key="id"
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.optionText }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="node.level === 4"
                    @click="() => add(node, data, 1)">
                    新增
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="node.level === 1"
                    @click="() => del(node, data, 1)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-col>
          <el-col :span="12">
            <el-tree
              :data="treeData2"
              default-expand-all
              node-key="id"
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.optionText }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="node.level === 4"
                    @click="() => add(node, data, 2)">
                    新增
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="node.level === 1"
                    @click="() => del(node, data, 2)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-col>
        </el-row>
      </PageEditCollapse>
      <el-dialog :visible.sync="dialogFormVisible" @opened="opendialogForm" @close="closedialogForm" width="768px">
        <el-form :model="checkConfig" :rules="rules" ref="checkConfig">
          <el-row>
            <el-col :span="19">
              <el-form-item label="文本内容：" prop="optionText" label-width="150px">
                <el-input v-model="checkConfig.optionText" placeholder="请输入文本内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="needInspectionVisible">
            <el-col :span="19">
              <el-form-item label="节点类型：" prop="needInspection" label-width="150px">
                <el-select v-model="checkConfig.needInspection" placeholder="请选择" style="width:100%;">
                  <el-option
                    v-for="item in needInspections"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="19">
              <el-form-item label="排序：" prop="orderIndex" label-width="150px">
                <el-input v-model.number="checkConfig.orderIndex" placeholder="请输入序号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('checkConfig')">保存</el-button>
        </div>
        <div slot="title" class="dialog-edit-head">
          <i>编辑{{currTreeIndex === 1 ? '开工会' : ''}}{{currTreeIndex === 2 ? '班前会' : ''}}</i>
        </div>
      </el-dialog>
    </div>
  </PageTemplate>
</template>
<style lang="scss">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import {COMMON} from '@/utils/commonUtil'
import api_she from '@/api/api_she'
export default {
  components: { PageTemplate, PageEditCollapse },
  data () {
    return {
      treeData1: [],
      treeData2: [],
      currTreeIndex: 0, // (0 刷新全部 ，1 刷新treeData1, 2 刷新treeData2)
      dialogFormVisible: false,
      needInspectionVisible: false,
      checkConfig: {
        id: null,
        parentId: null,
        optionText: null,
        orderIndex: 0,
        needInspection: 0
      },
      rules: {
        optionText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        orderIndex: [
          { required: false, message: '', trigger: 'blur' },
          { type: 'number', message: '请输入有效数字值'}
        ]
      },
      needInspections: [ // 节点类型
        // Constant.MEETING_OPTION_0,
        Constant.MEETING_OPTION_1,
        Constant.MEETING_OPTION_2
      ]
    }
  },
  created () {
    this.queryTableList({})
  },
  watch: {
  },
  methods: {
    ...mapActions('common', [
    ]),
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let treeData1 = []
      let treeData2 = []
      api_she.sheCheckOptionsConfigLoadMenu(params, result => {
        if (result.code === Constant.RT_SUCCESS) {
          //表格数据  数组
          if (this.currTreeIndex === 0) {
            treeData1.push(result.data[0])
            treeData2.push(result.data[1])
            this.treeData1 = treeData1
            this.treeData2 = treeData2
          } else if (this.currTreeIndex === 1) {
            treeData1.push(result.data[0])
            this.treeData1 = treeData1
          }  else if (this.currTreeIndex === 2) {
            treeData2.push(result.data[1])
            this.treeData2 = treeData2
          }
          //分页数据
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    add (node, data, index) {
      this.currTreeIndex = index
      this.opendialogForm()
      this.checkConfig ={
        id: null,
        parentId: data.id,
        optionText: null,
        orderIndex: 0,
        needInspection: 0
      }
      if (node.level === 3) { // 特殊 加第四个节点，需要选择节点类型
        this.checkConfig.needInspection = 1
        this.showNeedInspection()
      } else {
        this.checkConfig.needInspection = 0
        this.closeNeedInspection()
      }
    },
    del (node, data, index) {
      this.currTreeIndex = index
      COMMON.confirm({}, () => {
        var ids = {idList: [data.id]}
        api_she.sheCheckOptionsConfigDel(ids, result => {
          if (result.code === Constant.RT_SUCCESS) {
            this.queryTableList({})
            ALERT.success(result.msg)
          } else {
            ALERT.error(result.msg)
          }
        })
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          api_she.sheCheckOptionsConfigSave([this.checkConfig], result => {
            if (result.code === Constant.RT_SUCCESS) {
              this.queryTableList({})
              ALERT.success(result.msg)
              this.closedialogForm()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 编辑框
    opendialogForm () {
      this.dialogFormVisible = true
      if (this.$refs['checkConfig']) {
        this.$refs['checkConfig'].clearValidate() // 移除表单项的校验结果
      }
    },
    closedialogForm () {
      this.dialogFormVisible = false
    },
    // 是否显示选项值
    showNeedInspection () {
      this.needInspectionVisible = true
    },
    closeNeedInspection () {
      this.needInspectionVisible = false
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
    })
  }
}
</script>
